<template>
    <div>
        <div class="m-style have-nav" v-show="model == 'search'">
            <block-index-nav-bar :title="'盘点列表'"></block-index-nav-bar>
            <div>
                <click_pageList
                    ref="pageList"
                    :url="url"
                    :cols="cols"
                    :list-cond="listCond"
                    @toDetail="toDetail"
                >
                    <template v-slot="scope">
                        <strong>{{ scope.row.number }}</strong>
                    </template>
                </click_pageList>
                <template>
                    <div>
                        <icons padding="10 10 60 10" class="icons-warp">
                            <div class="float-icon-item">
                                <img src="../../../assets/logo.png" alt="" @click="handleIcons('claim')">
                            </div>
                        </icons>
                    </div>
                </template>
            </div>

        </div>
        <!--        <div v-if="model == 'scanner'">-->
        <!--            <code-scanner @back="back"></code-scanner>-->
        <!--        </div>-->
    </div>
</template>

<script>
import blockIndexNavBar from "@/components/blockIndexNavBar";
// import m_pageList from "@/uitl/m_pageList";
import {API_URL} from "@/config/urlInfo";
import icons from "@/components/s-icons/icons";
import {Config} from "@/config/formDataOptions";
import * as dd from 'dingtalk-jsapi';
import click_pageList from "@/uitl/click_pageList";

export default {
    name: "inventoryScanner",
    components: {
        blockIndexNavBar,
        click_pageList,
        icons
    },
    data() {
        return {
            model: "search",
            number: "",
            url: API_URL.aloneInventoryByID,
            cols: {
                show: [
                    {title: '设备名称', field: 'name'},
                    {title: '盘点状态', field: 'State_CN'}
                ],
            },
            show: true,
            loading: false,
            listCond: {id: this.$route.query.id},
            id: this.$route.query.id

        }
    },
    methods: {
        toDetail(item) {
            this.$router.push({path: '/assets-mobile/alonePersonInfo', query: {id: item.id}});
        },
        back(result) {
            if (typeof result != 'undefined') {
                let id = this.$route.query.id
                let obj = JSON.parse(result.text);
                let ledgerId = obj.ledgerId
                Config.postDatas(API_URL.aloneInventoryUpdateTableById, {id, ledgerId}, res => {
                    this.$refs.pageList.onRefresh()
                    this.model = "search"
                }, this)
            } else {
                this.model = "search"
            }
        },
        handleIcons() {
            let that = this
            dd.ready(function () {
                dd.biz.util.scan({
                    type: 'all', // type 为 all、qrCode、barCode，默认是all。
                    onSuccess: function (data) {
                        //onSuccess将在扫码成功之后回调
                        /* data结构
                         { 'text': String}
                         */
                        if (typeof JSON.parse(data.text).ledgerId != 'undefined') {
                            let id = that.id
                            let ledgerId = JSON.parse(data.text).ledgerId
                            console.log("ledgerIdledgerIdledgerIdledgerId", ledgerId)
                            Config.postDatas(API_URL.aloneInventoryUpdateTableById, {id, ledgerId}, res => {
                                // that.$refs.pageList.onRefresh()
                                // that.model = "search"
                                setTimeout(() => {
                                    that.handleIcons()
                                }, 1000);

                            }, that)
                        }

                    },
                    onFail: function (err) {
                        that.$refs.pageList.onRefresh()
                        that.model = "search"
                    }
                })
            });
            // this.model = "scanner"
        },
        onSearch() {
            this.listCond = {
                number: this.number
            };
        },
        onLoad() {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1);
                }

                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.list.length >= 40) {
                    this.finished = true;
                }
            }, 1000);
        },
    }
}
</script>

<style scoped lang="less">
.search-btn {
    .van-button {
        width: 48%;
        margin-right: 1%;
    }

    background: #fff;
    text-align: center;
    padding: 11px 0;
}

.list-btn {
    .van-button {
        width: 45%;
        margin-right: 2%;
        float: right;
    }
}

.wt-card {
    margin: 0.4rem;
    background: #fff;
    overflow: hidden;
    border-radius: 0.3rem;
    padding: 0.4rem;
    box-shadow: 0 0 0.2rem #ccc;
    border-bottom: 0.1rem solid #ccc;
}


.icons-warp {
    border-radius: 25px;

    .float-icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 50px;
        height: 50px;

        img {
            width: 25px;
            height: 25px;
            margin-bottom: 3px;
        }

        span {
            font-size: 9px;
            color: #666666;
        }
    }
}


</style>